<!--  -->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        
        <Menu />
      </el-aside>
      <el-container>
        <el-header> <div @click="exit">退出登录</div>
         
         <!-- {{ userStore.getToken }} -->
        </el-header>
        <el-main>
          
           <router-view :key="key" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang='ts' setup>
import {ref,watch} from 'vue'
import Menu from '../components/Menu.vue'
import {useUserStore} from '../store/index'
import {useRoute,useRouter} from 'vue-router'
import myrouter from '../router/index'
 
const router=useRouter();

 const route=useRoute();

 const key=ref(route.fullPath);

const userStore=useUserStore();
watch(route,()=>{
  key.value=route.fullPath;
 })

 const exit=()=>{
  localStorage.clear();
  myrouter.removeRoute('Home');
  router.push("/login");
 }
 

</script>
<style scoped>
.common-layout{
  width:100%;
  height:100vh;
}
.el-container{
  height:100%;
}
.el-aside{
  background:#304156
}
.el-main{
  background:#ececec
}
</style>